{% extends 'header.html' %}
{% load static %}
{% block content %}

    <!-- ===============  Main banner area start =============== -->
    <div class="main-banner">
        <div class="banner-slider owl-carousel">
            <div class="slider-item slider-item-1" style="background-image:url({% static '/img/xiamenlunbo.jpg' %}"; data-wow-delay="300ms" data-wow-duration="1500ms">
                <div class="container">
                    <div class="slider-content wow fadeInLeft animated">
                        <h2>厦门 </h2>
                            <h5>鼓浪屿, 植物园</h5>
                            <div class="banner-btn">
                                <a href="#xiamen" class="btn-common">Book Now</a>
                            </div>
                    </div>
                </div>
            </div>
            <div class="slider-item slider-item-2"  style="background-image:url({% static '/img/fuzhou.jpg' %}"; data-wow-delay="300ms" data-wow-duration="1500ms">
                <div class="container">
                    <div class="slider-content wow fadeInLeft animated" data-wow-delay="300ms" data-wow-duration="1500ms">
                        <h2>福州 </h2>
                            <h5>三坊七巷, 平潭岛</h5>
                            <div class="banner-btn">
                                <a href="#fuzhou" class="btn-common">Book Now</a>
                            </div>
                    </div>
                </div>
            </div>
            <div class="slider-item slider-item-3"  style="background-image:url({% static '/img/quanzhou.jpg' %}"; data-wow-delay="300ms" data-wow-duration="1500ms">
                <div class="container">
                    <div class="slider-content wow fadeInLeft animated" data-wow-delay="300ms" data-wow-duration="1500ms">
                        <h2>泉州 </h2>
                            <h5>开元寺, 清源山</h5>
                            <div class="banner-btn">
                                <a href="#quanzhou" class="btn-common">Book Now</a>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ===============  Main banner area end =============== -->



     <!-- ===============  Package  area start =============== -->
    <div class="package-area pt-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="section-head pb-45">
                        <h5>大家都爱去</h5>
                        <h2>选择合适的景点来游玩吧</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                {% for obj in queryset %}
                <div class="col-lg-4 col-md-6 col-sm-6 wow fadeInUp animated" data-wow-duration="1500ms" data-wow-delay="0ms">
                        <div class="package-card">
                        <div class="package-thumb">
                            <img src="/media/{{ obj.image }}" alt="" class="img-fluid">
                        </div>
                        <div class="package-details">
                            <div class="package-info">
                                <h5><span>￥{{ obj.price }}</span>/每人</h5>
                                <h5><i class="flaticon-calendar"></i>{{ obj.sname }}</h5>
                            </div>
                            <h3><i class="flaticon-arrival"></i>
                                <a href="/package/{{ obj.id }}/details/">{{ obj.province }} {{ obj.sname }}</a>
                            </h3>
                            <div class="package-rating">
                               <strong><i class='bx bxs-star'></i><span>{{ obj.get_level_display }}</span></strong>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
     <!-- ===============  Package  area end =============== -->

     <!-- =============== Destinations area start =============== -->
    <div class="destinations-area pt-105">
         <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="section-head pb-40">
                        <h5>地区分类</h5>
                        <h2>选择您最想去的地方</h2>
                    </div>
                </div>
            </div>
            <div class="row">
            <a name="fuzhou"></a>
                <div class="col-lg-3 col-md-3">
                    <div class="package-slider-wrap">
                        <img src="/static/picture/d-1.png" alt="" class="img-fluid">
                        <div class="pakage-overlay">
                            <strong>福州</strong>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 col-md-9">

                    <div class="row owl-carousel destinations-1">
                        {% for obj in scenic1 %}
                         <div class="package-card">
                            <div class="package-thumb">
                                <img src="/media/{{ obj.image }}" alt="" class="img-fluid">
                            </div>
                            <div class="package-details">
                                <div class="package-info">
                                    <h5><span>￥{{ obj.price }}</span>/每人</h5>
                                    <h5><i class="flaticon-calendar"></i>{{ obj.sname }}</h5>
                                </div>
                                <h3><i class="flaticon-arrival"></i>
                                    <a href="/package/{{ obj.id }}/details/">{{ obj.province }} {{ obj.sname }}</a>
                                </h3>
                                <div class="package-rating">
                                   <strong><i class='bx bxs-star'></i><span>{{ obj.get_level_display }}</span></strong>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>

                </div>
            </div>
            <div class="row">
            <a name="xiamen"></a>
                <div class="col-lg-9 col-md-9">
                    <div class="row owl-carousel destinations-1">
                        {% for obj in scenic2 %}
                         <div class="package-card">
                            <div class="package-thumb">
                                <img src="/media/{{ obj.image }}" alt="" class="img-fluid">
                            </div>
                            <div class="package-details">
                                <div class="package-info">
                                    <h5><span>￥{{ obj.price }}</span>/每人</h5>
                                    <h5><i class="flaticon-calendar"></i>{{ obj.sname }}</h5>
                                </div>
                                <h3><i class="flaticon-arrival"></i>
                                    <a href="/package/{{ obj.id }}/details/">{{ obj.province }} {{ obj.sname }}</a>
                                </h3>
                                <div class="package-rating">
                                   <strong><i class='bx bxs-star'></i><span>{{ obj.get_level_display }}</span></strong>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="col-lg-3 col-md-3">
                    <div class="package-slider-wrap">
                        <img src="/static/picture/d-2.png" alt="" class="img-fluid">
                        <div class="pakage-overlay">
                            <strong>厦门</strong>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <a name="quanzhou"></a>
                <div class="col-lg-3 col-md-3">
                    <div class="package-slider-wrap">
                        <img src="/static/picture/d-3.png" alt="" class="img-fluid">
                        <div class="pakage-overlay">

                            <strong>泉州</strong>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 col-md-9">

                    <div class="row owl-carousel destinations-1">
                        {% for obj in scenic3 %}
                         <div class="package-card">
                            <div class="package-thumb">
                                <img src="/media/{{ obj.image }}" alt="" class="img-fluid">
                            </div>
                            <div class="package-details">
                                <div class="package-info">
                                    <h5><span>￥{{ obj.price }}</span>/每人</h5>
                                    <h5><i class="flaticon-calendar"></i>{{ obj.sname }}</h5>
                                </div>
                                <h3><i class="flaticon-arrival"></i>
                                    <a href="/package/{{ obj.id }}/details/">{{ obj.province }} {{ obj.sname }}</a>
                                </h3>
                                <div class="package-rating">
                                   <strong><i class='bx bxs-star'></i><span>{{ obj.get_level_display }}</span></strong>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>

                </div>
            </div>
         </div>
     </div>
{% endblock %}
